var LoadImage = function () {
    function LoadImage() {
        this.imgCache = {};
    }

    var P = LoadImage.prototype;

    P.get = function(src, options, callback) {
        var imgCache = this.imgCache;
        if (imgCache[src]) {
            if (imgCache[src][1]) {
                console.log('返回图片：' + src);
                callback(imgCache[src][0], imgCache[src][2][1]);
            } else {
                imgCache[src][2].push([callback, options]);
            }
        } else {
            var img = new Image;
            img.src = src;
            imgCache[src] = [img, !1, [[callback, options]]];
            console.log('加载图片：' + src);
            img.onload = function (ev) {
                imgCache[src][1] = true;
                imgCache[src][2].forEach(function (obj) {
                    console.log('返回图片：' + src);
                    obj[0](img, obj[1]);
                });
            }
        }
    };

    return LoadImage;
}();

var container = document.getElementById('container');
var ctx = container.getContext("2d");

function renderImage(img, options) {
    ctx.translate(options.pos[0], options.pos[1]);
    ctx.rotate(options.rotation);
    ctx.drawImage(img, -options.size[0] / 2, -options.size[1] / 2, options.size[0], options.size[1]);
    ctx.rotate(-options.rotation);
    ctx.translate(-options.pos[0], -options.pos[1]);
}

var loadImage = new LoadImage;

function render(offset) {
    for (var i = 0; i < 40; i++) {
        var url = i%2 == 0 ? 'ship_small_0.png' : 'ship_large_0.png';
        var size = i%2 == 0 ? [30, 30] : [60, 60];
        var pos = [i%10*60+60+offset, Math.floor(i/10)*60+60+offset];
        var rotation = (i*30)*Math.PI/180;
        loadImage.get(url, {pos: pos, size: size, rotation: rotation}, renderImage);
    }
}
console.log('绘制第一次');
render(0);
// console.log('绘制第二次');
// render(20);